<template>
  <div>
    <Header :left="true" leftText="返回" title="报修详情" />
    <div>
      <van-row style="margin-top:80px;">
        <van-col><van-image width="40" height="30" style="margin-left:-10px;" src="assets/block.png"/></van-col>
        <van-col class="message" style="margin-top:5px;">多媒体信息</van-col>
      </van-row>
      <!-- 多媒体信息 -->
      <div class="divMedia">
        <van-row style="margin-top:10px;">
          <van-col span="4" style="font-weight:bold;color:#A9A9A9;margin-left:10px;margin-top:8px;">视频：</van-col>
          <van-col span="14" style="color:#A9A9A9;">
            <!-- 循环显示视频 -->
            <div v-show="vedioShow" v-for="item in vedioList" :key="item.id" style="margin-left:-10px;">
              <van-image
                style="float:left;"
                width="100"
                height="40"
                @click="playVedio(item.filePath)"
                src="assets/vedio.png"
              />
            </div>
          </van-col>
        </van-row>
        <van-divider style="margin-top:0px;" />
        <van-row style="margin-top:10px;">
          <van-col span="3" style="font-weight:bold;color:#A9A9A9;margin-left:10px;margin-top:8px;">照片：</van-col>
          <van-col span="14" style="color:#A9A9A9;"
            ><van-uploader v-show="photoShow" v-model="photoList" :deletable="false" multiple :max-count="pictureNum"
          /></van-col>
        </van-row>
        <van-divider style="margin-top:0px;" />
        <van-row style="margin-top:10px;">
          <van-col span="4" style="font-weight:bold;color:#A9A9A9;margin-left:10px;margin-top:8px;">语音：</van-col>
          <van-col span="14" style="color:#A9A9A9;"
            ><div
              v-show="audioShow"
              @click="playArm"
              style="background-color: #00FF33; width:140px;height:35px; margin-left:-10px;"
            >
              <van-image
                v-show="audioStop"
                width="40"
                height="30"
                style="margin-right:3px;float:left;"
                src="assets/voice.png"
              >
              </van-image>
              <van-loading v-show="audioLoad" style="float:center;" color="white"
                ><span style="color:white;font-size:15px;">播放中...</span></van-loading
              >
            </div></van-col
          >
        </van-row>
      </div>
      <!-- 文字信息 -->
      <van-row style="margin-top:30px;">
        <van-col><van-image width="40" height="30" style="margin-left:-10px;" src="assets/block.png"/></van-col>
        <van-col class="message" style="margin-top:5px;">其他信息</van-col>
      </van-row>
      <div>
        <!-- <Field
          v-model="equipDetail.eqKey"
          :readonly="true"
          size="large"
          style="font-weight:bold;color:#A9A9A9;"
          center
          colon
          label="设备编码"
        /> -->
        <Field
          v-model="equipDetail.description"
          :readonly="true"
          size="large"
          style="font-weight:bold;color:#A9A9A9;"
          center
          colon
          label="设备名称"
        />
        <Field
          v-model="equipDetail.requestUser"
          :readonly="true"
          size="large"
          style="font-weight:bold;color:#A9A9A9;"
          center
          colon
          label="报修人"
        />
        <Field
          v-model="equipDetail.remark"
          size="large"
          rows="1"
          autosize
          style="font-weight:bold;color:#A9A9A9;"
          :readonly="true"
          label="报修描述"
          type="textarea"
        />
        <Field
          v-model="equipDetail.requestTime"
          :readonly="true"
          size="large"
          style="font-weight:bold;color:#A9A9A9;"
          center
          colon
          label="报修时间"
        />
        <Field
          v-model="equipDetail.checkUser"
          :readonly="true"
          size="large"
          style="font-weight:bold;color:#A9A9A9;"
          center
          colon
          label="审核人"
        />
        <Field
          v-model="equipDetail.checkTime"
          :readonly="true"
          size="large"
          style="font-weight:bold;color:#A9A9A9;"
          center
          colon
          label="审核时间"
        />
        <Field
          v-model="equipDetail.executeUser"
          :readonly="true"
          size="large"
          style="font-weight:bold;color: #00ff00"
          center
          colon
          label="执行人"
        />
        <Field
          v-model="helpUser"
          :readonly="true"
          size="large"
          style="font-weight:bold;color: #bed742"
          center
          colon
          label="协助人"
        />
      </div>
      <!-- 底部按钮 -->
      <!-- <Button
        v-show="equipDetail.checkTime != '' ? true : false"
        block
        class="buttonDown"
        color="#138087"
        @click="taskAssign"
        >指派</Button
      > -->
    </div>
  </div>
</template>
<script>
import {
  Icon,
  Button,
  CellGroup,
  Cell,
  Field,
  Col,
  Row,
  Dialog,
  Image as VanImage,
  Divider,
  Checkbox,
  Pagination,
  Search,
  Sticky,
  Toast,
  Uploader,
  Loading,
} from 'vant'
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Dialog)
Vue.use(Button)
Vue.use(Col)
Vue.use(Row)
Vue.use(Icon)
Vue.use(VanImage)
Vue.use(Divider)
Vue.use(Checkbox)
Vue.use(Pagination)
Vue.use(Search)
Vue.use(Sticky)
Vue.use(Uploader)
Vue.use(Loading)
import Header from '@/components/header.vue'
import { _httpClient } from '@/libs/api'
import { removeToken, getToken, setBaseApiFrefix, getBaseApiFrefix } from '@/libs/auth'

export default {
  components: { Button, Header, Icon, CellGroup, Cell, Field, Col, Row, Search, Sticky },

  data() {
    return {
      buttonShow: true, //指派按钮是否显示
      //多媒体文件
      photoList: [
        //图片
      ],
      pictureNum: 0, //照片数量
      helpUsers: [], //协助人信息
      helpUser: '', //协助人
      playing: '播放中...', //语音播放中字幕
      audioLoad: false, // 语音播放中
      audioStop: true, // 语音暂停
      photoShow: false, //照片显示控制
      vedioShow: false, //视频显示控制
      audioShow: false, //语音显示控制
      vedioList: [], //视频
      audioPath: '', //语音
      equipDetail: null,
      chosenContactId: '1',
      screenWidth: 0,
      searchValue: '',
      active: 2,
      currentPage: 1,
      fileUrl: '',
      items: [
        // { id: 1, userName: '用户1', time: '2020-12-02 22:08:00', user: '测试账户1', checked: true },
        // { id: 2, userName: '用户2', time: '2020-12-03 22:08:00', user: '测试账户2', checked: false },
        // { id: 3, userName: '用户3', time: '2020-12-03 22:08:00', user: '测试账户3', checked: true },
        // { id: 4, userName: '用户4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
        // { id: 5, userName: '用户5', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
        // { id: 6, userName: '用户1', time: '2020-12-02 22:08:00', user: '测试账户1', checked: true },
        // { id: 7, userName: '用户2', time: '2020-12-03 22:08:00', user: '测试账户2', checked: false },
        // { id: 8, userName: '用户3', time: '2020-12-03 22:08:00', user: '测试账户3', checked: true },
        // { id: 9, userName: '用户4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
        // { id: 10, userName: '用户5', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
        // { id: 11, userName: '用户1', time: '2020-12-02 22:08:00', user: '测试账户1', checked: true },
        // { id: 12, userName: '用户2', time: '2020-12-03 22:08:00', user: '测试账户2', checked: false },
        // { id: 13, userName: '用户3', time: '2020-12-03 22:08:00', user: '测试账户3', checked: true },
        // { id: 14, userName: '用户4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
        // { id: 15, userName: '用户5', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
        // { id: 16, userName: '用户4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
        // { id: 17, userName: '用户5', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
        // { id: 18, userName: '用户1', time: '2020-12-02 22:08:00', user: '测试账户1', checked: true },
        // { id: 19, userName: '用户2', time: '2020-12-03 22:08:00', user: '测试账户2', checked: false },
        // { id: 21, userName: '用户4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
        // { id: 22, userName: '用户22', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
      ],
    }
  },
  created: function() {
    let oldHight = api.winWidth
    this.screenWidth = oldHight
    this.equipDetail = api.pageParam.equip
    this.queryFileById()
    this.queryRepairById()
  },
  methods: {
    //搜索
    onSearch() {},

    //任务转派
    taskAssign() {
      let _this = this
      Dialog.confirm({
        title: '提示',
        message: '是否确认指派任务?',
          theme: 'round-button',
      })
        .then(() => {
          //打开人员选择界面
          api.openWin({
            name: 'personSelect',
            url: './maintain-toRepair-personSelect.html',
            type: 'fade',
          })
          api.addEventListener(
            {
              name: 'resultUser',
            },
            function(ret, err) {
              if (ret.value.selectUser.length == 0) {
                Dialog.alert({
                  message: '未选择指派人员',
                    theme: 'round-button',
                }).then(() => {
                  // on close
                })
                return
              }
              let selectUser = ret.value.selectUser
              //更新执行人
              _this.updateExecuter(_this.equipDetail.id, selectUser[0].userAccound)
            }
          )
        })
        .catch(() => {})
    },

    //更新执行人
    async updateExecuter(id, userName) {
      let _this = this
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: 'Loading...',
      })
      try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/app/repair/repairInfo/updateUserByRequstId', {
          body: { id: id, repairUser: userName },
        })
        if (res.code === 200) {
          Toast.clear()
          api.sendEvent({
            name: 'result',
            extra: {
              item: _this.form,
            },
          })
          _this.$ac.closeWin()
        } else {
          Toast.fail(res.msg)
        }
      } catch (e) {
        Toast.clear()
        alert(JSON.stringify(e))
      }
    },

    //视频播放
    playVedio(filePath) {
      let that = this;
      if (api.deviceName.toLowerCase() == "vivo" || api.deviceName.toLowerCase() == "oppo" || api.deviceName.toLowerCase() == "honor") {
        var videoPlayer = api.require("videoPlayer");
        videoPlayer.play(
          {
            path: filePath.trim(),
            autoPlay: true
          },
          function (ret, err) {

          }
        );
      } else {
        that.$ac.openVideo({
          url: filePath.trim(),
        });
      }
    },

    //语音播放
    playArm() {
      //判断是播放还是暂停
      if (!this.audioLoad) {
        this.audioLoad = true
        this.audioStop = false
        if (this.audioPath == '') {
          Dialog.alert({
            message: '当前无语音信息',
              theme: 'round-button',
          }).then(() => {
            // on close
          })
        }
        var audioStreamer = api.require('audioStreamer')
        let _this = this
        audioStreamer.addEventListener({}, function(ret) {
          if (ret.state == 'finished') {
            _this.audioLoad = false
            _this.audioStop = true
          }
        })
        if (api.systemType == 'ios') {
          api.download(
            {
              url: _this.audioPath,
            },
            function(res) {
              if (res.state == 1) {
                api.startPlay(
                  {
                    path: res.savePath,
                  },
                  function(ret, err) {
                    if (ret) {
                      // _that.activeAudio = ''
                    } else {
                      alert(JSON.stringify(err))
                    }
                  }
                )
              }
            }
          )
        } else {
          audioStreamer.openPlayer(
            {
              path: _this.audioPath,
            },
            function(ret) {}
          )
        }
      } else {
        var audioStreamer = api.require('audioStreamer')
        audioStreamer.pause()
        this.audioLoad = false
        this.audioStop = true
      }
    },

    //查询保修单多媒体信息
    async queryFileById() {
      let _this = this
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: 'Loading...',
      })
      try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/app/repair/requestFile/selectFiles', {
          body: { requestId: _this.equipDetail.id },
        })
        if (res.code === 200) {
          Toast.clear()
          if (res.rows.length > 0) {
            //筛选图片、视频、录音
            let pictures = []
            let vedios = []
            let audios = []
            for (let i = 0; i < res.rows.length; i++) {
              if (res.rows[i].fileType == '0') {
                //照片
                let paths = res.rows[i].filePath.split(';')
                for (let j = 0; j < paths.length; j++) {
                  let num = 0
                  if (paths[j] != '') {
                    let picture = { url: paths[j] }
                    pictures.push(picture)
                    num++
                  }
                  _this.pictureNum = num
                }
                //显示照片
                _this.photoShow = true
              } else if (res.rows[i].fileType == '1') {
                let paths = res.rows[i].filePath.split(';')
                for (let j = 0; j < paths.length; j++) {
                  if (paths[j] != '') {
                    let vedio = { filePath: paths[j] }
                    _this.vedioList.push(vedio)
                  }
                }
                //视频
                // _this.vedioList.push(res.rows[i])
                _this.vedioShow = true
              } else if (res.rows[i].fileType == '2') {
                //语音
                let paths = res.rows[i].filePath.split(';')
                for (let j = 0; j < paths.length; j++) {
                  if (paths[j] != '') {
                    _this.audioPath = paths[j]
                    _this.audioShow = true
                    break
                  }
                }
                // if (_this.audioPath == '') {
                //   _this.audioPath = res.rows[i].filePath
                //   _this.audioShow = true
                // }
              }
            }
            _this.photoList = pictures //照片数组赋值
          }
        } else {
          Toast.fail(res.msg)
        }
      } catch (e) {
        Toast.clear()
        alert(JSON.stringify(e))
      }
    },

    //查询报修单执行人协助人信息
    async queryRepairById() {
      let _this = this
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: 'Loading...',
      })
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + '/app/repair/repairInfo/selectRepairByRequestId',
          {
            body: { requestId: _this.equipDetail.id },
          }
        )
        if (res.code === 200) {
          Toast.clear()
          if (res.rows != null && res.rows.length > 0) {
            //维修执行人
            _this.equipDetail.executeUser = res.rows[0].repairUserName
            //维修协助人
            _this.helpUsers = res.rows[0].helpUsers
            //维修协助人
            if (_this.helpUsers != null && _this.helpUsers.length > 0) {
              for (let i = 0; i < _this.helpUsers.length; i++) {
                if (i == 3) {
                  _this.helpUser += '...'
                  break
                }
                _this.helpUser += _this.helpUsers[i].userCode + '、'
              }
            }
            _this.$forceUpdate()
          }
        } else {
          Toast.fail(res.msg)
        }
      } catch (e) {
        Toast.clear()
        alert(JSON.stringify(e))
      }
    },
  },
}
</script>
<style>
body {
  background-color: White;
}

.clickbtn {
  width: 1;
  margin: 5px 10px;
  line-height: 45px;
  border: 1px #ccc dashed;
  text-align: center;
}
.buttonRight {
  position: fixed;
  margin-top: -40px;
  right: 10px;
  width: 88px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}
.buttonLeft {
  position: fixed;
  bottom: 5px;
  right: 10px;
  width: 88px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}
.message {
  font-size: 20px;
  margin-top: 0px;
  margin-left: -10px;
  font-weight: bold;
}
.divStyle {
  margin-left: 3px;
  margin-right: 3px;
}
.pagination {
  position: fixed;
  bottom: 15px;
  width: 300px;
  margin-left: 10%;
  color: rgb(0, 0, 255);
  text-align: center;
}
.divMedia {
  margin-top: 10px;
  height: 215px;
  border: solid #dcdcdc;
  margin-left: 5px;
  margin-right: 15px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
}
.buttonDown {
  position: fixed;
  right: 5px;
  bottom: 20px;
  width: 150px;
  height: 40px;
  font-size: 12px;
}
</style>
